@import './variables.scss';

/* 改变主题色变量 */
// 主题色
$--color-primary: $primary;
// 成功颜色
$--color-success: $positive;
// 警告颜色
$--color-warning: $warning;
// 危险颜色
$--color-danger: $negative;
// 信息颜色
$--color-info: $info;
// 主要文字颜色
$color-text-primary: $dark;
// 常规文字颜色
$color-text-regular: #606266;
// 次要文字颜色
$color-text-secondary: #909399;
// 占位文字颜色
$color-text-placeholder: #C0C4CC;
// 一级边框颜色
$border-color-base: #DCDFE6;
// 二级边框颜色
$border-color-light: #E4E7ED;
// 三级边框颜色
$border-color-lighter: #EBEEF5;
// 四级不安狂颜色
$border-color-extra-light: #F2F6FC;
// 基础白色
$color-white: #FFFFFF;
// 基础黑色
$color-black: $dark;
// 基础背景色
$background-color-base: #F5F7FA;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

// 修改默认加载动画
.el-loading-spinner .circular{
    background-image:url('~@/assets/loading.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.el-loading-spinner{
    .path{
        display: none;
    }
    .el-loading-text{
        color: $negative;
        font-size: 1em;
    }
} 

// 修改头像样式
.el-avatar{
    background: #ffffff;
    box-shadow: 0 0 15px 10px rgba($color: #ced6e0, $alpha: 0.5);
}

// 顶部的面包屑导航样式
.header-breadcrumb{
    margin-left: 20px;
    .el-breadcrumb{
        &__inner, &__separator{
            color: #ffffff;
        }
        &__item{
            .el-breadcrumb__inner, .el-breadcrumb__separator{
                color: #ffffff;
                &:hover{
                    color: #ffffff;
                }
            }
        }
    }
}

// header里面点击用户名弹出框样式
.header-user-popover {
    box-shadow: 0 0 10px 10px rgba($color: $dark, $alpha: 0.5);
}

// 表格列内容居中
.el-table td, .el-table th{
    text-align: center;
}

// message样式
.el-message, .el-message{
    .el-message__icon{
        color: #ffffff;
    }
    .el-message__content{
        color: #ffffff;
    }
    &--error{
        background-color: $negative;
        border-color: $negative;
        box-shadow: 0 0 25px 25px #ffffff;
    }
    &--info{
        background-color: $info;
        border-color: $info;
        box-shadow: 0 0 25px 25px #ffffff;
    }
    &--success{
        background-color: $positive;
        border-color: $positive;
        box-shadow: 0 0 25px 25px #ffffff;
    }
    &--warning{
        background-color: $warning;
        border-color: $warning;
        box-shadow: 0 0 25px 25px #ffffff;
    }
}

.el-menu-item {
    i {
        color: $dark;
    }
    &.is-active {
        background-color: $primary;
        i {
            color: inherit;
        }
    }
    [class^='gea gea-icon-'] {
        vertical-align: middle;
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

.el-submenu{
    i {
        color: $dark;
    }
    &.is-active {
        background-color: rgba($color: $primary, $alpha: 0.15);
        i {
            color: inherit;
        }
    }
    [class^='gea gea-icon-'] {
        vertical-align: middle;
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

.el-form-item__error{
    border-radius: 5px;
    background: $negative;
    color: #fff;
    padding: 5px;
    top: 80%;
    left: 2%;

}
